<template>
	<!-- 因素选择 -->
	<view class="type_7">
		<!-- 单排模式 -->
		<template v-if="activeQuestion.extension.LayerResourceDisplayType==1">
			<view class="displayType_1">
				<view class="questionText"  v-html="activeQuestion.questionText"></view>
				<view class="questionResourceContainer" @click="previewImage(activeQuestion.questionResources[0].href)">
					<image :src="activeQuestion.questionResources[0].href" mode="aspectFit">
					</image>
				</view>
				<Swiper v-if="paperMode==1" ref="swiper" class="swiper" :layerResources="activeQuestion.layerResources"
					fakeSwiper @clickLayer="clickLayer" @drag="drag">
				</Swiper>

				<view v-if="paperMode==1" class="tip">
					请把每张要素图层按不同因素，拖到下面对应的收纳框中
				</view>

				<view v-if="paperMode==1" class="factors">
					<view v-for="(factor,factorIndex) of activeQuestion.choices" class="factor">
						<view class="clear" @click="clearFactor(factorIndex)">
							<uni-icons type="closeempty" size="1vw" color="#999"></uni-icons>
						</view>
						<view class="factorImages" :style="{backgroundColor:'rgba(' +factor.extension.Color +')'}">
							<image v-for="layerIndex of activeAnswer[factorIndex]" :style="{
								width:factorImageSize(activeAnswer[factorIndex].length),
								height:factorImageSize(activeAnswer[factorIndex].length)
							}" :src="activeQuestion.layerResources[layerIndex].href" mode="aspectFit"
								@click="customPreviewImage={layerIndex,factorIndex}">
							</image>
						</view>
						<view class="factorText">
							{{factor.choiceText}}
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 两列模式 -->
		<template v-if="activeQuestion.extension.LayerResourceDisplayType==2">
			<view class="displayType_2">
				<Swiper v-if="paperMode==1" class="swiper" vertical
					:layerResources="activeQuestion.layerResources.filter((item,index)=>index%2==0)" fakeSwiper
					@clickLayer="clickLayer" @drag="drag">
				</Swiper>
				<view class="middle">
					<view class="questionText" v-html="activeQuestion.questionText"></view>
					<view class="questionResourceContainer"
						@click="previewImage(activeQuestion.questionResources[0].href)">
						<image :src="activeQuestion.questionResources[0].href" mode="aspectFit">
						</image>
					</view>

					<view v-if="paperMode==1" class="tip">
						请把每张要素图层按不同因素，拖到下面对应的收纳框中
					</view>
					<view v-if="paperMode==1" class="factors">
						<view v-for="(factor,factorIndex) of activeQuestion.choices" class="factor">
							<view class="clear" @click="clearFactor(factorIndex)">
								<uni-icons type="closeempty" size="1vw" color="#999"></uni-icons>
							</view>
							<view class="factorImages" :style="{backgroundColor:'rgba(' +factor.extension.Color +')'}">
								<image v-for="layerIndex of activeAnswer[factorIndex]" :style="{
								width:factorImageSize(activeAnswer[factorIndex].length),
								height:factorImageSize(activeAnswer[factorIndex].length)
							}" :src="activeQuestion.layerResources[layerIndex].href" mode="aspectFit"
									@click="customPreviewImage={layerIndex,factorIndex}">
								</image>
							</view>
							<view class="factorText">
								{{factor.choiceText}}
							</view>
						</view>
					</view>
				</view>
				<Swiper v-if="paperMode==1" class="swiper" vertical
					:layerResources="activeQuestion.layerResources.filter((item,index)=>index%2==1)" fakeSwiper
					@clickLayer="clickLayer" @drag="drag">
				</Swiper>
			</view>
		</template>

		<template v-if="paperMode==2 && activeRecord">
			<view class="recordCard">

				<radio-group @change="recordIndex=$event.detail.value"
					style="display: flex;flex-wrap:wrap;align-items: center;">
					<label v-for="(factor,index) of activeQuestion.choices" style="display: flex;flex-direction: column;align-items: center;width:10vw;
						box-sizing: border-box;margin: 0.5vw;">
						<view :style="{backgroundColor:'rgba(' +factor.extension.Color +')'}"
							style="width:10vw;height:10vw;"></view>
						<view
							style="height:3vw;line-height: 3vw;width:10vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;">
							{{factor.choiceText}}
						</view>
						<radio color="#2380E9" :value="String(index)" :checked="recordIndex == index"
							style="margin:0.3vw;" />
					</label>
				</radio-group>

			</view>
			<view class="recordCard">
				<view class="title">参考答案</view>
				<view class="answer">
					<template v-if="activeRecord.answer===null">无</template>
					<template v-else>
						<view style="display: flex;align-items: center;flex-wrap: wrap;">
							<image v-for="answer of activeRecord.answer[recordIndex]"
								:src="activeQuestion.layerResources[answer].href" mode="aspectFit"
								style="width:8vw;height:8vw;margin-right: 2vw;"
								@click="previewImage(activeQuestion.layerResources[answer].href)"></image>
						</view>
					</template>
				</view>
				<view v-if="activeRecord.answerDetail" class="answerDetail">
					{{activeRecord.answerDetail}}
				</view>
			</view>

			<view class="recordCard">
				<view class="title">我的答案</view>
				<view class="userAnswer">
					<template
						v-if="activeRecord.userAnswer===null||activeRecord.userAnswer[recordIndex].length==0">无</template>
					<template v-else>
						<view style="display: flex;align-items: center;flex-wrap: wrap;">
							<image v-for="answer of activeRecord.userAnswer[recordIndex]"
								:src="activeQuestion.layerResources[answer].href" mode="aspectFit"
								style="width:8vw;height:8vw;margin-right: 2vw;"
								@click="previewImage(activeQuestion.layerResources[answer].href)"></image>
						</view>
					</template>
				</view>
			</view>
		</template>

		<view v-if="customPreviewImage" class="customPreviewImageBg">
			<view class="customPreviewImage"></view>
			<image :src="activeQuestion.layerResources[customPreviewImage.layerIndex].href" mode="aspectFit"></image>
			<view class="deletePreviewImage" @click.stop="deletePreviewImage">移除因素</view>
			<view class="closePreviewImage" @click="customPreviewImage=null">
				<uni-icons type="closeempty" size="2vw" color="#fff"></uni-icons>
			</view>

		</view>
	</view>
</template>

<script>
	import Swiper from "./Swiper.vue";
	export default {
		components: {
			Swiper
		},
		props: ["paperMode", "activeQuestion", "initAnswer", "activeRecord"],
		data() {
			return {
				activeAnswer: null,
				activeLayerIndex: 0,
				greyIndexList: [],

				//record
				recordIndex: 0,


				//预览已选因素
				customPreviewImage: null, //{layerIndex,factorIndex}
			}
		},
		watch: {
			activeAnswer: {
				handler(newValue, oldValue) {
					let greyIndexList = [];
					newValue.forEach((item, index) => {
						if (item) {
							greyIndexList.push(index)
						}
					})
					this.greyIndexList = greyIndexList;
				},
				deep: true,
			}
		},
		created() {
			this.activeAnswer = this.initAnswer;
		},
		methods: {
			clickLayer(layerIndex) {
				this.activeLayerIndex = layerIndex;
			},
			drag(e) {
				//获得拖拽的释放中心点 {x,y}
				// console.log("drag", e)

				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".factor")
					.fields({
							rect: true,
						},
						(factorPosList) => {
							let factorIndex = factorPosList.findIndex(item => {
								return (e.x > item.left && e.x < item.right && e.y > item.top &&
									e.y < item.bottom)
							})
							if (factorIndex != -1) {
								// console.log(`将第${e.layerIndex}个图层拖拽到了第${factorIndex}个因素`)
								if (this.activeAnswer[factorIndex].indexOf(e.layerIndex) == -1) {
									this.activeAnswer[factorIndex].push(e.layerIndex);
								}
								this.updateAnswer();
							}
						})
					.exec();
			},
			updateAnswer() {
				this.$emit("updateAnswer", this.activeAnswer);
			},

			factorImageSize(length) {
				let countPerRow = Math.ceil(Math.sqrt((length)));
				return `${100/countPerRow}%`
			},
			clearFactor(factorIndex) {
				this.activeAnswer[factorIndex].splice(0);
			},
			deletePreviewImage() {
				// console.log("customPreviewImage", this.customPreviewImage)
				let toDeleteIndex = this.activeAnswer[this.customPreviewImage.factorIndex].findIndex(item => item == this
					.customPreviewImage.layerIndex)
				// console.log("this.activeAnswer", this.activeAnswer)
				this.activeAnswer[this.customPreviewImage.factorIndex].splice(toDeleteIndex, 1);
				this.customPreviewImage = null;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./record.scss";

	.type_7 {
		.displayType_1 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.questionText {
				line-height: 2vw;
				white-space: pre-wrap;
			}

			.questionResourceContainer {
				width: 40vw;
				height: 15vw;
				margin-top: 1vw;
				margin-bottom: 1vw;
				position: relative;

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.tip {
				margin-top: 1.5vw;
				font-size: 1.2vw;
			}

			.swiper {
				margin-top: 1vw;
			}

			.factors {
				width: 71vw;
				margin-top: 1.5vw;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				position: relative;

				.clear {
					$clearSize: 1.5vw;
					position: absolute;
					right: -$clearSize/2;
					top: -$clearSize/2;
					width: $clearSize;
					height: $clearSize;
					line-height: $clearSize;
					border: 1px solid #999;
					border-radius: 50%;
					background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 2;
				}

				.factor {
					$factorTextHeight: 3vw;
					position: relative;
					padding-bottom: $factorTextHeight;

					.factorImages {
						width: 9vw;
						height: 9vw;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						image {
							box-sizing: border-box;
							padding: 2%;
						}
					}

					.factorText {
						font-size: 1.2vw;
						position: absolute;
						bottom: 0;
						height: $factorTextHeight;
						line-height: $factorTextHeight;
						white-space: nowrap;
						left: 50%;
						transform: translateX(-50%);

					}
				}

			}

		}



		.displayType_2 {
			display: flex;
			align-items: flex-start;

			.middle {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.questionText {
					line-height: 2vw;
					white-space: pre-wrap;
				}

				.questionResourceContainer {
					width: 40vw;
					height: 20vw;
					margin-top: 1vw;
					margin-bottom: 1vw;
					position: relative;

					image {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}
				}

				.tip {
					margin-top: 1.5vw;
					font-size: 1.2vw;
				}


				.factors {
					align-self: stretch;
					margin-top: 1.5vw;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;

					.clear {
						$clearSize: 1.5vw;
						position: absolute;
						right: -$clearSize/2;
						top: -$clearSize/2;
						width: $clearSize;
						height: $clearSize;
						line-height: $clearSize;
						border: 1px solid #999;
						border-radius: 50%;
						background-color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 2;
					}

					.factor {
						$factorTextHeight: 3vw;
						position: relative;
						padding-bottom: $factorTextHeight;

						.factorImages {
							width: 9vw;
							height: 9vw;
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							image {
								box-sizing: border-box;
								padding: 2%;
							}
						}

						.factorText {
							font-size: 1.2vw;
							position: absolute;
							bottom: 0;
							height: $factorTextHeight;
							line-height: $factorTextHeight;
							white-space: nowrap;
							left: 50%;
							transform: translateX(-50%);

						}
					}

				}
			}


			.swiper {
				margin: 2.5vw;
			}

		}

		.customPreviewImageBg {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			z-index: 500;
			background-color: rgba(0, 0, 0, 0.7);
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				max-width: 80vw;
				max-height: 80vh;
			}

			.deletePreviewImage {
				position: absolute;
				background-color: $uni-error;
				left: 50%;
				transform: translateX(-50%);
				bottom: 5vh;
				color: #fff;
				border-radius: 0.5vw;
				padding: 1vw 2vw;
			}

			.closePreviewImage {
				position: absolute;
				right: 1vw;
				top: 1vw;

			}
		}
	}
</style>